<template>
  <div class="orderRefundImmediately">
    <el-form :model="refundImmediatelyModel" :rules="refundImmediatelyRules" ref="refundImmediatelyForm" size="small" label-width="110px">
      <el-form-item label="退款单号：">
        <el-input v-model="refundImmediatelyModel.orderNo" placeholder="请输入退款单号" readonly disabled clearable :style="{ width: '100%' }"></el-input>
      </el-form-item>
      <el-button @click.native="onRefundImmediately('refundImmediatelyForm')" style="width: 100%;" type="primary" size="small">提交</el-button>
    </el-form>
  </div>
</template>

<script>
  import {
    getRefundApi as getRefundImmediatelyDataApi
  } from '@/api/order';

  export default {
    name: 'Index',
    props: {
      orderId: {
        type: [String, Number],
        default: 0
      },
      orderNo: {
        type: [String, Number],
        default: 0
      }
    },
    data() {
      return {
        refundImmediatelyModel: {
          orderNo: this.orderNo,
          refundPrice: 0.00
        },
        refundImmediatelyRules: {}
      };
    },
    methods: {
      /**
       * 立即退款
       * @param formName
       */
      onRefundImmediately(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            getRefundImmediatelyDataApi(this.orderId).then(() => {
              this.$message.success('提交成功!');
              this.$emit('getRefundImmediately');
              this.$emit('close');
            });
          } else {
            return false;
          };
        });
      },
      channelInputLimit(e) {
        const key = e.key
        if (key === 'e' || key === '.') {
          e.returnValue = false
          return false
        }
        return true
      }
    }
  }
</script>

<style scoped>

</style>
